<template>
    <div class="content" v-if="opacity" v-loading="loading">
        <div class="column">
            <img src="@/assets/imgs/sys/noaccount.png" class="image" />
            <div class="text">您还没有宝户通账户，请先创建！</div>
            <div class="account">
                <BindAccountDialog @handle-confirm="handleRefresh">
                    <template>我有账号，立即绑定</template>
                </BindAccountDialog>
            </div>
            <div class="allbtn">
                <span class="perbtn" @click="openHandler('/pay/account/individual')">开通个体工商户</span>
                <span class="combtn" @click="openHandler('/pay/account/enterprise')">开通企业账户</span>
            </div>
        </div>
    </div>
    <Detail v-else :no="no" />
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import request from '@/request';
import storage from '@/commons/storage';
import Detail from './detail/index.vue';
import { isEmpty } from '@/commons/utils';
import BindAccountDialog from './bindAccountDialog.vue';
let opacity = ref(true);
const router = useRouter();
const openHandler = (url, query = {}) => {
    router.replace({
        path: url,
        query
    });
};
let no = ref();
let loading = ref(false);
const getRegInfo = async () => {
    // 分账2.0现在的逻辑处理
    loading.value = true;
    const { data } = await request('baofuRegInfo', { tenantId: storage.get('ZW-TENANT-ID') });
    loading.value = false;
    data.loginNo &&
        storage.set('ZW-TENANT-LOGINNO', { loginNo: data.loginNo, merchantName: data.merchantName, email: data.email });
    // 开户成功
    if (!isEmpty(data)) {
        if ([10, 20].includes(data.accountStatus / 1)) {
            // 开通成功跳转到详情页面
            // openHandler('/pay/accountDetail', { no: data.loginNo });
            no.value = data.loginNo;
            opacity.value = false;
            return;
        }
        // accountType  1 企业账户 2 个体账户 3 个人账户',
        if (data.accountType == 1) {
            // 企业账户
            openHandler('/pay/account/enterprise', {
                no: data.loginNo
            });
        } else if (data.accountType == 2) {
            //个体账户
            openHandler('/pay/account/individual', {
                no: data.loginNo,
                paySequenceNo: data.paySequenceNo
            });
        } else {
            // 个人账户
            openHandler('/pay/account/person', {
                no: data.loginNo,
                paySequenceNo: data.paySequenceNo
            });
        }
    } else {
        //没有开户
        opacity.value = true;
    }
};
getRegInfo();
const handleRefresh = data => {
    if (data.accountType == 3) {
        // 跳转到个人账户列表页
        openHandler('/pay/baohutong');
    } else {
        // 判断账户的开通状态，若已签约，则进入我的账户，若未签约，则进入指定的开户进度页
        getRegInfo();
    }
};
</script>
<style lang="scss" scoped>
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 190px);
    .column {
        display: flex;
        flex-direction: column;
        align-items: center;
        .image {
            width: 278px;
            height: 128px;
        }
        .allbtn {
            margin-top: 24px;
            .perbtn {
                cursor: pointer;
                display: inline-block;
                width: 128px;
                height: 32px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #ff6b00;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ff6b00;
                line-height: 32px;
                text-align: center;
                margin-right: 24px;
            }
            .combtn {
                cursor: pointer;
                display: inline-block;
                width: 128px;
                height: 32px;
                background: #ff6b00;
                border-radius: 4px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 32px;
                text-align: center;
            }
        }
    }
    .text {
        margin-top: 31px;
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 28px;
    }
    .account {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff6b00;
        line-height: 22px;
    }
}
</style>
